<template>
	<view class="recorditem-wrap " :class="{shake:isEdit}" :style="{backgroundColor:bgColor}">
		<view class="recorditem-content" @longpress="handleLongPress">
			
			<view class="recorditem-content__name">
				<!-- 🎮 -->
				游戏
			</view>
			<view class="recorditem-content__count">
				86 MIN
			</view>
		</view>
		<view class="recorditem-info">
			<view class="recorditem-info__tip">
				Last Execute
			</view>
			<view class="recorditem-info__time">
				2023年12月23日
			</view>
		</view>
	</view>
	
</template>
<script setup>
	import  {ref} from "vue"
	const isEdit = ref(false)
	const emits = defineEmits(["onlongPress"])
	const props = defineProps({
		
		bgColor:{
			type:String,
			default:'#fff'
		},
		
	})
	const handleLongPress = ()=>{
		emits('onlongPress')
		isEdit.value = true
	}
</script>
<style>
	@keyframes shakes {
		0%{
			transform: rotate(3deg);
		}
		25%{
			transform: rotate(0deg);
		}
		50%{
			transform: rotate(-3deg);
		}
		75%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(3deg);
		}
		
	}
	.recorditem-wrap{
		margin:10rpx 0;
		width:340rpx;
		height:340rpx;
		border-radius: 30rpx;
		
	}
	.shake{
	animation: shakes infinite 250ms;	
	}
	.recorditem-content{
		width: 100%;
		height:70%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.recorditem-content__name{
		font-size: 1.9em;
	}
	.recorditem-content__count{
		margin-top: 10rpx;
	}
	.recorditem-info{
		text-align: center;
		font-size: 0.8em;
	};
	
</style>